<template>
  <div>
    <div class="SalesProcess">
      <div
        class="figure customerFollowUp"
        v-if="roleList.SalesConsultant || roleList.ShowroomManager"
        style="width:49.6%;marginBottom:10px;"
      >
        <p class="title">展厅客流销售漏斗</p>
        <div class="figureContent">
          <Chart1 ref="Chart1" :option="option1" :containerStyle="{height: '270px'}" />
          <div class="figureBottom">
            <!-- <div class="btn_left">
              <span>留档</span>
              <div class="btn_c">
                <img src="../../../assets/img/arrow.png" alt="右箭头" />
                <span class="btn_percentage">{{ dataBtm1.left || 0 }}%</span>
              </div>
              <span>订单</span>
            </div>-->
            <div class="btn_mid">
              <span>战败：</span>
              <span>{{ dataBtm1.failCount}}</span>
              <i></i>
              <span>{{ dataBtm1.center || 0 }}%</span>
            </div>
            <!-- <div class="btn_right">
              <span>留档</span>
              <div class="btn_c">
                <img src="../../../assets/img/arrow.png" alt="右箭头" />
                <span class="btn_percentage">{{ dataBtm1.right || 0 }}%</span>
              </div>
              <span>成交</span>
            </div>-->
          </div>
        </div>
      </div>
      <div
        class="figure customerFollowUp"
        v-if="roleList.SalesConsultant || roleList.ShowroomManager"
        style="width:49.6%;marginBottom:10px;"
      >
        <p class="title">展厅客流销售过程走势</p>
        <div class="figureContent">
          <Chart1 ref="Chart2" :option="option2" :containerStyle="{height: '340px'}" />
        </div>
      </div>
      <div
        class="figure customerFollowUp"
        v-if="roleList.NetSalesConsultant || roleList.NetSalesManager"
        style="width:49.6%;"
      >
        <p class="title">线索销售漏斗</p>
        <div class="figureContent">
          <Chart1 ref="Chart3" :option="option3" :containerStyle="{height: '270px'}" />
          <div class="figureBottom">
            <!-- <div class="btn_left">
              <span>有效线索</span>
              <div class="btn_c">
                <img src="../../../assets/img/arrow.png" alt="右箭头" />
                <span class="btn_percentage">{{ dataBtm3.left || 0 }}%</span>
              </div>
              <span>订单</span>
            </div>-->
            <div class="btn_mid">
              <span>战败：</span>
              <span>{{ dataBtm3.failCount}}</span>
              <i></i>
              <span>{{ dataBtm3.center || 0 }}%</span>
            </div>
            <!-- <div class="btn_right">
              <span>有效线索</span>
              <div class="btn_c">
                <img src="../../../assets/img/arrow.png" alt="右箭头" />
                <span class="btn_percentage">{{ dataBtm3.right || 0 }}%</span>
              </div>
              <span>成交</span>
            </div>-->
          </div>
        </div>
      </div>
      <div
        class="figure customerFollowUp"
        v-if="roleList.NetSalesConsultant || roleList.NetSalesManager"
        style="width:49.6%;"
      >
        <p class="title">线上线索销售过程走势</p>
        <div class="figureContent">
          <Chart1 ref="Chart4" :option="option4" :containerStyle="{height: '340px'}" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { querySalesProcessForHall, querySalesProcessForNet, querySalesProcessOnline, querySalesProcessForHall2 } from '@/api/dashboard/index';
import Chart1 from '@/charts/preSale/chart1';
import moment from 'moment';
export default {
  name: 'SalesProcess',
  components: {
    Chart1
  },
  props: {
    rowDate: {
      type: Object,
      default: () => ({})
    },
    rowData: {
      type: Object,
      default: () => ({})
    },
    roleList: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      option1: this.createOption1(),
      option2: this.createOption2(),
      option3: this.createOption3(),
      option4: this.createOption4(),
      dataSource1: [],
      dataSource3: [],
      dataBtm1: {},
      dataBtm3: {}
    };
  },
  watch: {
    rowDate(newDate) {
      // console.log(newDate)
      // this.showOption2 = true;
      if (this.roleList.SalesConsultant || this.roleList.ShowroomManager) {
        this.querySalesProcessForHall(newDate);
      }
      if (this.roleList.NetSalesConsultant || this.roleList.NetSalesManager) {
        this.querySalesProcessForNet(newDate);
      }
    }
  },
  created() {
    if (this.roleList.SalesConsultant || this.roleList.ShowroomManager) {
      this.querySalesProcessForHall(this.rowDate);
    }
    if (this.roleList.NetSalesConsultant || this.roleList.NetSalesManager) {
      this.querySalesProcessForNet(this.rowDate);
    }
  },
  methods: {
    async querySalesProcessForHall(rowDate) {
      // console.log('querySalesProcessForHall',rowDate)
      if (rowDate.consultant === 0) {
        delete rowDate.consultant;
      }
      this.formDate = rowDate;
      const res = await querySalesProcessForHall(rowDate);
      if (res.resultCode === 200) {
        // console.log(res.data)
        // 展厅客流销售漏斗
        let createOption1 = this.createOption1();
        createOption1.series[0].max = res.data.passengerCount;
        createOption1.series[0].data = [
          { value: res.data.passengerCount, name: '进店' },
          { value: res.data.fileCount, name: '留档' },
          { value: res.data.drivePriceCount, name: '试驾' }
          // {value:res.data.followCount, name:'订单'},
          // {value:res.data.unFollowCount, name:'成交'},
        ];
        // this.dataSource1 = createOption1.series[0].data
        ///重置数据
        this.option1 = createOption1;
        //展厅客流销售过程走势
        let createOption2 = this.createOption2();
        if (rowDate.periodType === 'day') {
          let dataZoom = this.dataZoom();
          createOption2.dataZoom = dataZoom;
        }

        this.option2 = createOption2;
        this.querySalesProcessForHall2(rowDate, createOption1, createOption2, res.data);
      }
    },
    async querySalesProcessForNet(rowDate) {
      // console.log('querySalesProcessForNet',rowDate)
      if (rowDate.consultant === 0) {
        delete rowDate.consultant;
      }
      this.formDate = rowDate;
      const res = await querySalesProcessForNet(rowDate);
      if (res.resultCode === 200) {
        //console.log(res.data);
        // 线上客流销售漏斗
        let createOption3 = this.createOption3();
        createOption3.series[0].max = res.data.newClueCount;
        createOption3.series[0].data = [
          { value: res.data.newClueCount, name: '新增线索' },
          { value: res.data.validClueCount, name: '有效线索' },
          { value: res.data.inviteCount, name: '邀约数量' },
          { value: res.data.arriveCount || 0, name: '邀约到店' },
          { value: res.data.drivePriceCount, name: '试驾' }
          // {value:res.data.followCount, name:'订单'},
          // {value:res.data.unFollowCount, name:'成交'},
        ];
        // this.dataSource3 = createOption3.series[0].data
        // console.log(this.dataSource3)
        //重置数据
        this.option3 = createOption3;
        //线上线索销售过程走势
        let createOption4 = this.createOption4();
        if (rowDate.periodType === 'day') {
          let dataZoom = this.dataZoom();
          createOption4.dataZoom = dataZoom;
        }
        this.option4 = createOption4;

        this.querySalesProcessOnline(rowDate, createOption3, createOption4, res.data);
      }
    },
    async querySalesProcessForHall2(rowDate, createOption1, createOption2, datas) {
      let failCount = datas.failCount;
      let dateList = datas.dateList;
      //const res = await querySalesProcessForHall2(rowDate);
      //if (res.resultCode === 200) {
      // console.log(res.data)
      // 线上客流销售漏斗
      // createOption1.series[0].data.push({
      //   value: res.data.submitHallFunnelCount || 0,
      //   name: '订单'
      // });
      // createOption1.series[0].data.push({
      //   value: res.data.completeHallFunnelCount || 0,
      //   name: '成交'
      // });
      this.dataSource1 = createOption1.series[0].data;
      let dataMax = this.getMax(createOption1.series[0].data, 'value');
      createOption1.series[0].max = dataMax;
      //重置数据
      this.option1 = createOption1;
      // 底部数据计算
      let a = createOption1.series[0].data.find(x => x.name === '留档').value || 1;
      //let left = (res.data.submitHallFunnelCount / a) * 100;
      // this.dataBtm1.left = left.toFixed(2);
      let center = (failCount / a) * 100;
      this.dataBtm1.center = center.toFixed(2);
      this.dataBtm1.failCount = failCount;
      // let right = (res.data.completeHallFunnelCount / a) * 100;
      // this.dataBtm1.right = right.toFixed(2);

      //线上线索销售过程走势
      let datelList = this.integration(dateList, [], 'period');
      // console.log(datelList)
      if (this.formDate.periodType === 'year') {
        datelList = this.sortMerge(datelList, 'period');
      } else if (this.formDate.periodType === 'day') {
        datelList = this.sortMerge(datelList, 'period', 'year', true);
      } else {
        datelList = this.sortMerge(datelList, 'period', 'year');
      }
      // console.log(datelList)
      let xAxisData2 = [],
        passengerCount = [],
        fileCount = [],
        submitCount = [],
        completeCount = [];
      datelList.map(x => {
        switch (this.formDate.periodType) {
          case 'day':
            xAxisData2.push(x.period);
            break;
          case 'week':
            xAxisData2.push(`第${x.period}周`);
            break;
          case 'month':
            xAxisData2.push(`${x.period}月`);
            break;
          case 'quarter':
            xAxisData2.push(`${x.year}第${x.period}季度`);
            break;
          default:
            xAxisData2.push(x.period);
            break;
        }
        passengerCount.push(x.passengerCount || 0);
        fileCount.push(x.fileCount || 0);
        submitCount.push(x.submitCount || 0);
        completeCount.push(x.completeCount || 0);
      });
      createOption2.xAxis.data = xAxisData2;
      createOption2.series[0].data = passengerCount;
      createOption2.series[1].data = fileCount;
      createOption2.series[2].data = submitCount;
      createOption2.series[3].data = completeCount;
      this.option2 = createOption2;
      //}
    },
    async querySalesProcessOnline(rowDate, createOption3, createOption4, datas) {
      console.log(datas);
      let failCount = datas.failCount;
      let dateList = datas.dateList;
      // const res = await querySalesProcessOnline(rowDate);
      // if (res.resultCode === 200) {
      // console.log(res.data)
      // 线上客流销售漏斗
      // createOption3.series[0].data.push({
      //   value: res.data.orderNetFunnelCount || 0,
      //   name: '订单'
      // });
      // createOption3.series[0].data.push({
      //   value: res.data.completeNetFunnelCount || 0,
      //   name: '成交'
      // });
      this.dataSource3 = createOption3.series[0].data;
      let dataMax = this.getMax(createOption3.series[0].data, 'value');
      createOption3.series[0].max = dataMax;
      // console.log(this.dataSource3)
      let a = createOption3.series[0].data.find(x => x.name === '有效线索').value || 1;
      // let left = (res.data.orderNetFunnelCount / a) * 100;
      // this.dataBtm3.left = left.toFixed(2);
      let center = (failCount / a) * 100;
      this.dataBtm3.center = center.toFixed(2);
      this.dataBtm3.failCount = failCount;
      // let right = (res.data.completeNetFunnelCount / a) * 100;
      // this.dataBtm3.right = right.toFixed(2);
      //重置数据
      this.option3 = createOption3;
      console.log(dateList, '00000');
      //线上线索销售过程走势
      let dateNetList = this.integration(dateList, [], 'period');
      console.log(dateNetList, '111');
      if (this.formDate.periodType === 'year') {
        dateNetList = this.sortMerge(dateNetList, 'period');
      } else if (this.formDate.periodType === 'day') {
        dateNetList = this.sortMerge(dateNetList, 'period', 'year', true);
      } else {
        dateNetList = this.sortMerge(dateNetList, 'period', 'year');
      }
      console.log(dateNetList, '222');
      let xAxisData4 = [],
        newClueCount = [],
        validClueCount = [],
        inviteCount = [],
        arriveCount = [],
        submitCount = [],
        completeCount = [];
      dateNetList.map(x => {
        console.log(x);
        switch (this.formDate.periodType) {
          case 'day':
            xAxisData4.push(x.period);
            break;
          case 'week':
            xAxisData4.push(`第${x.period}周`);
            break;
          case 'month':
            xAxisData4.push(`${x.period}月`);
            break;
          case 'quarter':
            xAxisData4.push(`${x.year}第${x.period}季度`);
            break;
          default:
            xAxisData4.push(x.period);
            break;
        }
        console.log(validClueCount);
        newClueCount.push(x.newClueCount || 0);
        validClueCount.push(x.validClueCount || 0);
        inviteCount.push(x.inviteCount || 0);
        arriveCount.push(x.arriveCount || 0);
        // submitCount.push(x.submitCount || 0);
        // completeCount.push(x.completeCount);
      });
      createOption4.xAxis.data = xAxisData4;
      createOption4.series[0].data = newClueCount;
      createOption4.series[1].data = validClueCount;
      createOption4.series[2].data = inviteCount;
      createOption4.series[3].data = arriveCount;
      // createOption4.series[4].data = submitCount;
      // createOption4.series[5].data = completeCount;
      this.option4 = createOption4;
      // }
    },
    dataZoom() {
      return [
        {
          type: 'inside',
          start: 80,
          end: 100
        },
        {
          start: 80,
          end: 100,
          handleIcon:
            'image://',
          handleSize: '80%',
          handleStyle: {
            color: 'rgba(242,244,248,1)',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          },
          // fillerColor: 'rgba(255, 0, 0, 0.6)',
          borderColor: 'rgba(242,244,248, 1)',
          backgroundColor: '#f2f4f8',
          dataBackground: {
            lineStyle: {
              // color: 'rgba(0,4,10,0.25)',
              width: 0
            },
            areaStyle: {
              color: 'rgba(0,4,10,0.25)'
            }
          },
          textStyle: {
            color: 'rgba(0,0,0,0.65)'
          }
        }
      ];
    },
    createOption1() {
      let self = this;
      return {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,0.75)',
          // formatter: "{b} <br/> 数量: {c}<br/> 转化率: {d}%"
          formatter: function(params) {
            // console.log(params)
            var c = 0;
            // debugger
            if (self.dataSource1 && self.dataSource1[params.dataIndex - 1]) {
              c = (params.value / (self.dataSource1[params.dataIndex - 1].value || 1)) * 100;
            }
            return `${params.name} <br/> 数量: ${params.value}<br/> 转化率: ${c.toFixed(2)}%`;
          }
        },
        series: [
          {
            name: '展厅客流销售漏斗',
            type: 'funnel',
            left: '10%',
            top: 60,
            //x2: 80,
            bottom: 60,
            width: '80%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'none',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: []
          }
        ],
        // color:['rgba(32,137,249,1)', 'rgba(32,137,249,0.8)', 'rgba(32,137,249,0.6)', 'rgba(32,137,249,0.4)', 'rgba(32,137,249,0.2)'],
        color: ['rgba(32,137,249,0.2)', 'rgba(32,137,249,0.4)', 'rgba(32,137,249,0.6)', 'rgba(32,137,249,0.8)', 'rgba(32,137,249,1)']
      };
    },
    createOption2() {
      return {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.75)',
          axisPointer: {
            lineStyle: {
              color: 'rgba(0,4,10,0.25)'
            }
          }
        },
        legend: {
          left: '24',
          top: '24',
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          data: ['进店', '留档'],
          textStyle: {
            color: 'rgba(0,4,10,0.45)'
          }
        },
        xAxis: {
          type: 'category',
          data: [],
          interval: 0,
          rotate: 45,
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: 'rgba(87,90,94,1)'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#EBEBEC'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: 'rgba(0,4,10,0.25)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0,4,10,0.08)'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(0,4,10,0.08)'
            }
          }
        },
        series: [
          {
            name: '进店',
            type: 'line',
            smooth: true,
            data: [],
            areaStyle: {
              color: 'rgba(186,230,55,0.1)'
            }
          },
          {
            name: '留档',
            type: 'line',
            smooth: true,
            data: [],
            areaStyle: {
              color: 'rgba(82,204,238,0.1)'
            }
          }
          // {
          //   name: '订单',
          //   type: 'line',
          //   smooth: true,
          //   data: [],
          //   areaStyle: {
          //     color: 'rgba(32,137,249,0.1)'
          //   }
          // },
          // {
          //   name: '成交',
          //   type: 'line',
          //   smooth: true,
          //   data: [],
          //   areaStyle: {
          //     color: 'rgba(105,64,233,0.1)'
          //   }
          // }
        ],
        color: ['rgba(186,230,55,1)', 'rgba(82,204,238,1)', 'rgba(32,137,249,1)', 'rgba(105,64,233,1)']
        // color: ['#BAE637', '#52CCEE', '#2089F9', '#6940E9']
      };
    },
    createOption3() {
      let self = this;
      return {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(0,0,0,0.75)',
          // formatter: "{a} <br/>{b} : {c}%"
          formatter: function(params) {
            var c = 0;
            if (self.dataSource3 && self.dataSource3[params.dataIndex - 1]) {
              c = (params.value / (self.dataSource3[params.dataIndex - 1].value || 1)) * 100;
            }
            return `${params.name} <br/> 数量: ${params.value}<br/> 转化率: ${c.toFixed(2)}%`;
          }
        },
        series: [
          {
            name: '线索销售漏斗',
            type: 'funnel',
            left: '10%',
            top: 60,
            //x2: 80,
            bottom: 60,
            width: '80%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'none',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: []
          }
        ],
        // color:['rgba(32,137,249,1)', 'rgba(32,137,249,0.84)', 'rgba(32,137,249,0.7)', 'rgba(32,137,249,0.56)', 'rgba(32,137,249,0.42)', 'rgba(32,137,249,0.28)', 'rgba(32,137,249,0.14)'],
        color: ['rgba(32,137,249,0.14)', 'rgba(32,137,249,0.28)', 'rgba(32,137,249,0.42)', 'rgba(32,137,249,0.56)', 'rgba(32,137,249,0.7)', 'rgba(32,137,249,0.84)', 'rgba(32,137,249,1)']
      };
    },
    createOption4() {
      return {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.75)',
          axisPointer: {
            lineStyle: {
              color: 'rgba(0,4,10,0.25)'
            }
          }
        },
        legend: {
          left: '24',
          top: '24',
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          data: ['新增线索', '有效线索', '邀约数量', '邀约到店'],
          textStyle: {
            color: 'rgba(0,4,10,0.45)'
          }
        },
        xAxis: {
          type: 'category',
          data: [],
          interval: 0,
          rotate: 45,
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: 'rgba(87,90,94,1)'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#EBEBEC'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: 'rgba(0,4,10,0.25)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0,4,10,0.08)'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: 'rgba(0,4,10,0.08)'
            }
          }
        },
        series: [
          {
            name: '新增线索',
            type: 'line',
            smooth: true,
            data: [],
            areaStyle: {
              color: 'rgba(186,230,55,0.1)'
            }
          },
          {
            name: '有效线索',
            type: 'line',
            smooth: true,
            data: [],
            areaStyle: {
              color: 'rgba(54,207,201,0.1)'
            }
          },
          {
            name: '邀约数量',
            type: 'line',
            smooth: true,
            data: [],
            areaStyle: {
              color: 'rgba(64,169,255,0.1)'
            }
          },
          {
            name: '邀约到店',
            type: 'line',
            smooth: true,
            data: [],
            areaStyle: {
              color: 'rgba(89,126,247,0.1)'
            }
          },
          {
            name: '订单',
            type: 'line',
            smooth: true,
            data: [],
            areaStyle: {
              color: 'rgba(105,64,233,0.1)'
            }
          },
          {
            name: '成交',
            type: 'line',
            smooth: true,
            data: [],
            areaStyle: {
              color: 'rgba(255,61,211,0.1)'
            }
          }
        ],
        color: ['rgba(186,230,55,1)', 'rgba(54,207,201,1)', 'rgba(64,169,255,1)', 'rgba(89,126,247,1)', 'rgba(105,64,233,1)', 'rgba(255,61,211,1)']
        // color: ['#BAE637', '#36CFC9', '#40A9FF', '#597EF7', '#6940E9', '#FF3DD3']
      };
    },
    // 数组合并
    integration(list1, list2, Key) {
      if (list1.length < list2.length) {
        let list = list1;
        list1 = list2;
        list2 = list;
      }
      let length1 = list1.length;
      let length2 = list2.length;
      let arr = [];
      for (let i = 0; i < length1; i++) {
        for (let j = 0; j < length2; j++) {
          //判断添加的数组是否为空了
          if (list1.length > 0) {
            if (list1[i][Key] === list2[j][Key]) {
              arr.push(list1[i]);
              list1.splice(i, 1); //利用splice函数删除元素，从第i个位置，截取长度为1的元素
              length1--;
              // console.log(list2[j]);//重复元素
            }
          }
        }
      }
      for (let n = 0; n < list2.length; n++) {
        list1.push(list2[n]);
      }
      list1.forEach((x, i) => {
        arr.map(y => {
          if (x[Key] === y[Key]) {
            x = { ...x, ...y };
            list1.splice(i, 1, x);
          }
        });
      });
      return list1;
      // console.log(list1)
    },
    // 获取数组最大值
    getMax(list, key) {
      let max = 0;
      list.map(x => {
        if (x[key] > max) {
          max = x[key];
        }
      });
      return max;
    },
    sortMerge(list, key, searchKey, isTimeStamp) {
      var arr = [],
        arr1 = [],
        arr2 = [];
      var res = {
        data1: {
          year: 0,
          arr: []
        },
        data2: {
          year: 0,
          arr: []
        }
      };
      if (searchKey) {
        list.map(x => {
          if (res.data1.arr.length > 0) {
            if (res.data1.arr[0][searchKey] === x[searchKey]) {
              res.data1.arr.push(x);
            } else {
              if (!res.data2.year) {
                res.data2.year = x.year;
              }
              res.data2.arr.push(x);
            }
          } else {
            res.data1.year = x.year;
            res.data1.arr.push(x);
          }
        });
      } else {
        res.data1.year = list[0].year;
        res.data1.arr = list;
      }

      if (res.data2.arr.length > 0) {
        res.data2.arr = this.sort(res.data2.arr, key, isTimeStamp);
      }
      res.data1.arr = this.sort(res.data1.arr, key, isTimeStamp);
      // debugger
      if (res.data1.year > res.data2.year) {
        list = res.data2.arr.concat(res.data1.arr);
      } else {
        list = res.data1.arr.concat(res.data2.arr);
      }
      return list;
    },
    sort(list, key, isTimeStamp) {
      if (list.length === 0) {
        return [];
      }
      //外层循环：控制比较轮数 从0开始，次数小于长度-1
      for (var i = 1; i < list.length; i++) {
        //内层循环：控制每轮比较次数  数组长度-i
        for (var j = 0; j < list.length - i; j++) {
          //如果当前的元素(j)大于下一个元素(j+1)，则交换位置
          let a, b;
          if (isTimeStamp) {
            a = moment(list[j][key]).valueOf();
            b = moment(list[j + 1][key]).valueOf();
          } else {
            a = Number(list[j][key]);
            b = Number(list[j + 1][key]);
          }
          if (a > b) {
            var t = list[j];
            list[j] = list[j + 1];
            list[j + 1] = t;
          }
        }
      }
      return list;
    }
  }
};
</script>

<style scoped lang="less">
.SalesProcess {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background: #f2f4f8;
  border-radius: 2px;
  .figure {
    width: 49%;
    background: #fff;
    &:hover {
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    }
    .title {
      height: 58px;
      font-size: 16px;
      font-weight: 500;
      color: @mostColor;
      line-height: 58px;
      border-bottom: 1px solid rgba(0, 4, 10, 0.08);
      padding-left: 20px;
    }
    .figureBottom {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 25px;
      font-size: 14px;
      .btn_left,
      .btn_right {
        flex: 1;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        .btn_c {
          margin: 0 16px;
          position: relative;
          img {
            width: 47px;
            height: 6px;
          }
          .btn_percentage {
            position: absolute;
            top: -6px;
            left: 2px;
          }
        }
      }
      .btn_mid {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 45px;
        background: rgba(255, 77, 79, 1);
        color: #fff;
        &:hover {
          box-shadow: 0px 2px 4px 0px rgba(0, 4, 10, 0.25);
        }
        i {
          width: 1px;
          height: 10px;
          background: #fff;
          margin: 0 9px;
        }
      }
    }
  }
}
</style>
